import React, { Component } from 'react';
import { NavBar, Swiper,Toast} from 'antd-mobile'
import { StarOutline, FillinOutline, FolderOutline } from 'antd-mobile-icons'
import {request_canclecollect_action,request_collect_action} from '../store/actionCreator'
import { gooddetalis,collectgoods,addShopcart } from '../utils/api'
import {connect} from 'react-redux'

class product extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collectlist: [],
        }
    }

    handleBack() {
        this.props.history.go(-1)
    }
    componentDidMount() {
        //接收三级ID
        // console.log(this.props.location.state.id);

        this.setState({
            // list: res.data.goodinfo
        }, () => {
            gooddetalis({ goodid: this.props.location.state.id }).then((res) => {
                // console.log(res);
                this.setState({
                    collectlist: res.data.goodinfo
                })
            })
        })
       
        console.log(localStorage.getItem('userid'));
    }
    //点击收藏
    handleCollect(){
         var res = this.props.collectlist.find((item)=>{
            return item.id === this.state.collectlist.id
         }) 
         if(res){
           this.props.request_canclecollect(this.state.collectlist)
         }else{
            //触发action （触发 收藏动作）
            this.props.request_collect(this.state.collectlist)
         }
        collectgoods({userid:localStorage.getItem('userid'),goodid:this.props.location.state.id}).then((res)=>{
            
        })
    }
    //点击进入购物车
    shopcart(){
        this.props.history.push('/index/shopcart')
    }
    //点击加入购物车
    addShopcart(){
      addShopcart({userid:localStorage.getItem('userid'),goodid:this.props.location.state.id}).then((res)=>{
          console.log(res);
      })
    }
    render() {
        return (
            <div className='product'>
                <NavBar onBack={() => { this.handleBack() }}>
                    商品详情
                </NavBar>
                <div className='productpic'>
                    <Swiper autoplay loop>{this.state.collectlist.pics && this.state.collectlist.pics.map((item, index) => {
                        return (
                            <Swiper.Item key={index}>
                                <img src={item} alt="" />

                            </Swiper.Item>
                        )
                    })}</Swiper>
                </div>
                <div className='price'>
                    <span>{this.state.collectlist.salesPrice && this.state.collectlist.salesPrice.name}</span>
                    <span>{this.state.collectlist.salesPrice && this.state.collectlist.salesPrice.value}</span>
                </div>
                <div className='introduce'>
                    <span>{this.state.collectlist.salesPrice && this.state.collectlist.salesPrice.name}</span>
                    <div className='name'>{this.state.collectlist.name}</div>
                    <div className='engname'>{this.state.collectlist.description}</div>
                </div>
                <div className='footer'>
                    <div className='left'>
                        <div className='block' 
                        onClick={()=>{this.handleCollect(Toast.show({icon:'success',content:"收藏成功"}))}}>
                            {
                               this.props.collectlist.find((item)=>{
                                    return item.id === this.state.collectlist.id
                                }) ? '已收藏' : '收藏'
                            }
                            <span><StarOutline /></span>
                            {/* <span className='small'>收藏</span> */}
                        </div>
                        <div className='block'>
                            <span><FillinOutline /></span>
                            <span className='small'>分享</span>
                        </div>
                        <div className='block' onClick={()=>{this.shopcart()}}>
                            <span><FolderOutline /></span>
                            <span className='small'>购物车</span>
                        </div>
                    </div>
                    <div className='right'>
                        <button className='orange' 
                        onClick={()=>{this.addShopcart(Toast.show({icon:'success',content:"加入购物车成功"}))}}>加入购物车</button>
                        <button className='red'>立即购买</button>
                    </div>
                </div>
            </div>
        );
    }
}

// export default product;
export default connect(
    (state)=>{//负责将react组件redux仓库绑定，将store中的数据注入到react组件中(注入到props中)，在组件中
        //用this.props.collectlist就可以获取到store中的收藏列表
        return {
            'collectlist':state.collectlist,
            'shopcartlist':state.shopcartlist
        }

    },
    (dispatch)=>{
        return {
             request_collect(params){
            dispatch(request_collect_action(params))
        },
        request_canclecollect(params){
            dispatch(request_canclecollect_action(params))
        }
       
        }
    }
)(product);